<template>
  <div>
    <Card>
      <div :class="{root:true,margin:showMargin}">
        <div class="avatar">
          <el-avatar :size="100" :src="user.avatar"></el-avatar>
        </div>
        <div class="info">
          <div>
            <UserInfo :show-avatar="false" :user="user" style="margin-left: 0"/>
          </div>
        </div>
        <div class="flex count">
          <div class="c-item">
            <div>帖子</div>
            <h3>
              <nuxt-link :to="{name:'profile-posts',params:{id:user.id,page:1}}" v-text="user.topics"></nuxt-link>
            </h3>
          </div>
          <div class="c-item">
            <div>回答</div>
            <h3>
              <nuxt-link :to="{name:'profile-comments',params:{id:user.id,page:1}}" v-text="user.comments"></nuxt-link>
            </h3>
          </div>
          <div class="c-item">
            <div>点赞</div>
            <h3 v-text="user.likes">100</h3>
          </div>
        </div>

        <div class="ask" v-if="!isSelf">
          <nuxt-link :to="{name:'ask-to',params:{userId:user.id}}" class="el-button el-button--primary el-button--mini">
            向TA提问
          </nuxt-link>
        </div>
      </div>
    </Card>

  </div>
</template>

<script>
export default {
  name: "ProfileInfo",
  props: {
    user: {
      type: Object,
      default: null
    },
    showMargin: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    isSelf() {
      return this.$store.state.user && this.user.id === this.$store.state.user.id;
    }
  }
}
</script>

<style scoped lang="less">
.margin {
  margin-top: -80px;
}

.root {
  text-align: center;
}

.avatar {
  flex: 0 0 122px;
}

.info {
  flex: 1;

  .tips {
    font-size: 12px;
    color: var(--color);
    margin-top: 5px;
  }
}

.count {
  flex: 0 0 150px;
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);

  .c-item {
    margin-right: 10px;
    flex: 1;

    &:last-child {
      margin-right: 0;
    }
  }
}

</style>
